import QtQuick 2.7
import QtQuick.Controls 2.3


Item {
    id: loginTextArea
    implicitWidth:  362
    implicitHeight:  40

    property alias text: inputField.text
    property alias echoMode: inputField.echoMode
    property alias placeholderText: placeHold.text
    property alias textInput: inputField
    property alias inputFocus: inputField.focus
    property alias  picSrc :iconArea.source

    readonly property color backColor: "#00000000"

    signal tabPressed();
    signal enterPressed();
    signal editingFinished();
    signal activeFocusChanged();
    signal inputTextChanged();

    states :[
        State{
            name: "Normal"
            PropertyChanges {
                target: m_background
                border.color: "transparent";
            }
        },
        State{
            name:"Warning"
            PropertyChanges {
                target: m_background
                border.color: "red";
            }
        }
    ]

    Rectangle{
        id:m_background
        anchors.fill: parent
        radius: 50
        opacity: 1
        width: parent.width
        height: parent.height
        color: backColor
    }

    Image{
        id: iconArea
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: 9
        visible: true
    }

    TextInput{
        id: inputField

        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: iconArea.right
        anchors.leftMargin: 6
        anchors.right: parent.right
        anchors.rightMargin: 9
        horizontalAlignment: TextInput.AlignLeft
        verticalAlignment: TextInput.AlignVCenter
        font.pixelSize: 24
        selectByMouse: true
        selectionColor: "gray"
        passwordCharacter:"*"
        activeFocusOnPress:true
        color: "#5c14aa"
        clip: true
        Text {
            id: placeHold
            font: inputField.font
            color: "#3c5461"
            opacity: !inputField.activeFocus
            visible: !inputField.text
            Behavior on opacity{
                NumberAnimation{ duration: 300 }
            }
            anchors.fill: parent
            verticalAlignment: TextInput.AlignVCenter
        }
        onActiveFocusChanged: {
            loginTextArea.state = "Normal"
            loginTextArea.activeFocusChanged();
        }
        Keys.onTabPressed: {
            loginTextArea.tabPressed();
        }
        onAccepted: {
            loginTextArea.enterPressed();
        }
        onEditingFinished:{
            loginTextArea.editingFinished();
        }
        onTextChanged: {
            loginTextArea.inputTextChanged();
        }
        Keys.onReturnPressed: {
            loginTextArea.enterPressed();
        }
    }
    function selectAll(){
        inputField.selectAll();
    }

}
